<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/javascript.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Penpot - Text Editor Playground</title>
  </head>
  <body>
    <div id="playground">
      <div id="info">
        <form>
          <fieldset id="shape">
            <legend>Shape</legend>
            <div class="form-group">
              <label for="position-x">x</label>
              <input id="position-x" name="position-x" type="number" value="0">
            </div>
            <div class="form-group">
              <label for="position-y">y</label>
              <input id="position-y" name="position-y" type="number" value="0">
            </div>
            <div class="form-group">
              <label for="rotation">rotation</label>
              <input id="rotation" name="rotation" type="number" value="0">
            </div>
          </fieldset>
          <fieldset id="styles">
            <legend>Styles</legend>
            <!-- Font -->
            <div class="form-group">
              <label for="font-family">Font family</label>
              <select id="font-family">
                <option value="Open+Sans">Open Sans</option>
                <option value="sourcesanspro">Source Sans Pro</option>
                <option value="whatever">Whatever</option>
              </select>
            </div>
            <div class="form-group">
              <label for="font-size">Font size</label>
              <input id="font-size" type="number" value="14" />
            </div>
            <div class="form-group">
              <label for="font-weight">Font weight</label>
              <select id="font-weight">
                <option value="100">100</option>
                <option value="200">200</option>
                <option value="300">300</option>
                <option value="400">400 (normal)</option>
                <option value="500">500</option>
                <option value="600">600</option>
                <option value="700">700 (bold)</option>
                <option value="800">800</option>
                <option value="900">900</option>
              </select>
            </div>
            <div class="form-group">
              <label for="font-style">Font style</label>
              <select id="font-style">
                <option value="normal">normal</option>
                <option value="italic">italic</option>
                <option value="oblique">oblique</option>
              </select>
            </div>
            <!-- Text attributes -->
            <div class="form-group">
              <label for="line-height">Line height</label>
              <input id="line-height" type="number" value="1.0" />
            </div>
            <div class="form-group">
              <label for="letter-spacing">Letter spacing</label>
              <input id="letter-spacing" type="number" value="0.0" />
            </div>
            <div class="form-group">
              <label for="direction-ltr">LTR</label>
              <input id="direction-ltr" type="radio" name="direction" value="ltr" checked />
            </div>
            <div class="form-group">
              <label for="direction-rtl">RTL</label>
              <input id="direction-rtl" type="radio" name="direction" value="rtl" />
            </div>
            <!-- Text Align -->
            <div class="form-group">
              <label for="text-align-left">Align left</label>
              <input id="text-align-left" type="radio" name="text-align" value="left" checked />
            </div>
            <div class="form-group">
              <label for="text-align-center">Align center</label>
              <input id="text-align-center" type="radio" name="text-align" value="center" />
            </div>
            <div class="form-group">
              <label for="text-align-right">Align right</label>
              <input id="text-align-right" type="radio" name="text-align" value="right" />
            </div>
            <div class="form-group">
              <label for="text-align-justify">Align justify</label>
              <input id="text-align-justify" type="radio" name="text-align" value="justify" />
            </div>
            <!-- Text Transform -->
            <div class="form-group">
              <label for="text-transform-none">None</label>
              <input id="text-transform-none" type="radio" name="text-transform" value="none" checked />
            </div>
            <div class="form-group">
              <label for="text-transform-uppercase">Uppercase</label>
              <input id="text-transform-uppercase" type="radio" name="text-transform" value="uppercase" checked />
            </div>
            <div class="form-group">
              <label for="text-transform-capitalize">Capitalize</label>
              <input id="text-transform-capitalize" type="radio" name="text-transform" value="capitalize" />
            </div>
            <div class="form-group">
              <label for="text-transform-lowercase">Lowercase</label>
              <input id="text-transform-lowercase" type="radio" name="text-transform" value="lowercase" />
            </div>
          </fieldset>
          <fieldset id="debug">
            <legend>Debug</legend>
            <div class="form-group">
              <label for="direction">Direction</label>
              <input id="direction" readonly type="text" />
            </div>
            <div class="form-group">
              <label for="focus-node">Focus Node</label>
              <input id="focus-node" readonly type="text" />
            </div>
            <div class="form-group">
              <label for="focus-offset">Focus offset</label>
              <input id="focus-offset" readonly type="number">
            </div>
            <div class="form-group">
              <label for="focus-textspan">Focus TextSpan</label>
              <input id="focus-textspan" readonly type="text" />
            </div>
            <div class="form-group">
              <label for="focus-paragraph">Focus Paragraph</label>
              <input id="focus-paragraph" readonly type="text" />
            </div>
            <div class="form-group">
              <label for="anchor-node">Anchor Node</label>
              <input id="anchor-node" readonly type="text" />
            </div>
            <div class="form-group">
              <label for="anchor-offset">Anchor offset</label>
              <input id="anchor-offset" readonly type="number">
            </div>
            <div class="form-group">
              <label for="anchor-textspan">Anchor TextSpan</label>
              <input id="anchor-textspan" readonly type="text" />
            </div>
            <div class="form-group">
              <label for="anchor-paragraph">Anchor Paragraph</label>
              <input id="anchor-paragraph" readonly type="text" />
            </div>
            <div class="form-group">
              <label for="start-container">Start container</label>
              <input id="start-container" readonly type="text" />
            </div>
            <div class="form-group">
              <label for="start-offset">Start offset</label>
              <input id="start-offset" readonly type="text" />
            </div>
            <div class="form-group">
              <label for="end-container">End container</label>
              <input id="end-container" readonly type="text" />
            </div>
            <div class="form-group">
              <label for="end-offset">End offset</label>
              <input id="end-offset" readonly type="text" />
            </div>
            <div class="form-group">
              <label for="multi">Multi?</label>
              <input id="multi" readonly type="checkbox" />
            </div>
            <div class="form-group">
              <label for="multi-textspan">Multi text span?</label>
              <input id="multi-textspan" readonly type="checkbox" />
            </div>
            <div class="form-group">
              <label for="multi-paragraph">Multi paragraph?</label>
              <input id="multi-paragraph" readonly type="checkbox" />
            </div>
            <div class="form-group">
              <label for="is-text-focus">Is text focus?</label>
              <input id="is-text-focus" readonly type="checkbox" />
            </div>
            <div class="form-group">
              <label for="is-text-anchor">Is text anchor?</label>
              <input id="is-text-anchor" readonly type="checkbox" />
            </div>
            <div class="form-group">
              <label for="is-paragraph-start">Is paragraph start?</label>
              <input id="is-paragraph-start" readonly type="checkbox" />
            </div>
            <div class="form-group">
              <label for="is-paragraph-end">Is paragraph end?</label>
              <input id="is-paragraph-end" readonly type="checkbox" />
            </div>
            <div class="form-group">
              <label for="is-textspan-start">Is text span start?</label>
              <input id="is-textspan-start" readonly type="checkbox" />
            </div>
            <div class="form-group">
              <label for="is-textspan-end">Is text span end?</label>
              <input id="is-textspan-end" readonly type="checkbox">
            </div>
          </fieldset>
        </form>
      </div>
      <div id="app">

        <!--

          Canvas

        -->
        <canvas id="canvas"></canvas>
        <!--

          Editor

        -->
        <div class="text-editor-container align-top">
          <div
            class="text-editor-content"
            contenteditable="true"
            role="textbox"
            aria-multiline="true"
            aria-autocomplete="none"
            spellcheck="false"
            autocapitalize="false"></div>
        </div>
      </div>
    </div>
    <script src="./playground.js" type="module"></script>
  </body>
</html>
